<template>
  <view class="container">
    <unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" :collection="collectionList" field="deviceId,room,num,baseInfo,ip,espmac,health">
      <view v-if="error">{{error.message}}</view>
      <view class="grid" v-else-if="data">
				
				<u-grid :border="false" col="3">
						<u-grid-item v-for="(item, index) in data" :key="index" @click="handleItemClick(item._id)">
								<view v-if="item.health">
									<span class="iconfont icon-diannao" style="font-size: 36px; color:#5ac725"></span>
								</view>
								<view v-else>
									<span class="iconfont icon-diannao" style="font-size: 36px; color:#fa3534"></span>
								</view>
								<text class="grid-text">{{item.num}}</text>
						</u-grid-item>
				</u-grid>
      </view>
      <uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
    </unicloud-db>
    <uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />
  </view>
</template>

<script>
  const db = uniCloud.database()
  export default {
    data() {
      return {
        collectionList: "pc-info",
        loadMore: {
          contentdown: '',
          contentrefresh: '',
          contentnomore: ''
        }
      }
    },
    onPullDownRefresh() {
      this.$refs.udb.loadData({
        clear: true
      }, () => {
        uni.stopPullDownRefresh()
      })
    },
    onReachBottom() {
      this.$refs.udb.loadMore()
    },
		onBackPress(e){
			uni.navigateTo({
			  url: '/pages/index/index'
			})
			return true;
		},
    methods: {
			
      handleItemClick(id) {
        uni.navigateTo({
          url: './detail?id=' + id
        })
      },
      fabClick() {
        // 打开新增页面
        uni.navigateTo({
          url: './add',
          events: {
            // 监听新增数据成功后, 刷新当前页面数据
            refreshData: () => {
              this.$refs.udb.loadData({
                clear: true
              })
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss">
	@import url("/static/font/iconfont.css");
	
	.grid{
		margin: 5px;
		padding-top: 10px;
		border-radius: 4px;
		background-color: #f4f4f5;
		box-sizing: border-box;
	}
	.grid-text {
			font-size: 14px;
			color: #909399;
			padding: 10rpx 0 20rpx 0rpx;
			/* #ifndef APP-PLUS */
			box-sizing: border-box;
			/* #endif */
	}
</style>
